<script setup>
import { useRouter, useRoute } from "vue-router";
import { ref, reactive, watch } from "vue";
import request from "../../utils/request";
import { ElNotification } from "element-plus";
import { Delete, Plus, ZoomIn } from "@element-plus/icons-vue";
import index from "vuex";

const dialogImageUrl = ref("");
const dialogVisible = ref(false);
const disabled = ref(false);
const fileList = ref([]);
const upload = ref(null);

//移除图片
const handledel = (file) => {
  fileList.value = fileList.value.filter((i) => {
    return i.uid !== file.uid;
  });
};
//展示大图
const handlePictureCardPreview = (file) => {
  dialogImageUrl.value = file.url;
  dialogVisible.value = true;
};

//限制大小
//文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
const changeUploadImg = (file) => {
  const isJPG = file.raw.type === "image/jpeg";
  const isPNG = file.raw.type === "image/png";
  if (!isJPG && !isPNG) {
    ElNotification.error("上传图片只能是 JPG 或者 PNG 格式!");
    // 取消时在文件列表中删除该文件
    upload.value.handleRemove(file);
    return isJPG || isPNG;
  } else if (file.size / 1024 / 1024 > 4) {
    ElNotification.error("单张图片大小不能超过4MB!");
    return false;
  } else {
    fileList.value.push(file);
  }
};

let breadList = []; // 路由集合
const route = useRoute();
const router = useRouter();
const getBreadcrumb = (url) => {
  //获取url中匹配的路由
  let matched = url.matched;
  //如果不是首页
  if ("Home" == matched[0].name) {
    //将首页的meta属性设置为title为系统首页
    matched[0].meta = { title: "系统首页" };
  }
  //将匹配的路由赋值给breadList
  breadList = matched;
};
//监听route变化，当变化时调用getBreadcrumb函数
watch(
  route,
  (newValue, oldValue) => {
    getBreadcrumb(newValue);
  },
  { deep: true, immediate: true }
);
//表单默认数据
const yingpinForm = reactive({
  jzId: "",
  jzName: "",
  salary: "",
  phonenumber: "",
  content: "",
  username: "",
  tel: "",
  sex: "",
  age: "",
  ypState: 0,
});
//效验规则
const rules = reactive({
  jzId: [
    {
      required: true,
      message: "请选择岗位的类型",
      trigger: "change",
    },
  ],
  jzName: [
    {
      required: true,
      message: "请输入岗位名称",
      trigger: "blur",
    },
  ],
  salary: [
    {
      required: true,
      message: "请输入岗位薪资",
      trigger: "blur",
    },
  ],
  phonenumber: [
    {
      required: true,
      min: 11,
      max: 11,
      message: "请输入11位的商户电话",
      trigger: "blur",
    },
  ],
  content: [
    {
      required: true,
      message: "请输入岗位内容",
      trigger: "blur",
    },
  ],
  username: [
    {
      required: true,
      message: "请输入用户姓名",
      trigger: "change",
    },
  ],
  tel: [
    {
      required: true,
      min: 11,
      max: 11,
      message: "请输入11位的用户电话",
      trigger: "change",
    },
  ],
  sex: [
    {
      required: true,
      message: "请选择用户性别",
      trigger: "change",
    },
  ],
  age: [
    {
      required: true,
      message: "请输入用户年龄",
      trigger: "change",
    },
  ],
});
const yingpinFormRef = ref();
//重置表单
const resetForm = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
};
//提交表单
const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    const formData = new FormData();
    fileList.value.forEach((value, index) => {
      formData.append("file", value.raw);
    });
    formData.append("jzId", yingpinForm.jzId);
    formData.append("jzName", yingpinForm.jzName);
    formData.append("salary", yingpinForm.salary);
    formData.append("phonenumber", yingpinForm.phonenumber);
    formData.append("content", yingpinForm.content);
    formData.append("username", yingpinForm.username);
    formData.append("tel", yingpinForm.tel);
    formData.append("sex", yingpinForm.sex);
    formData.append("age", yingpinForm.age);
    formData.append("ypState", yingpinForm.ypState);

    if (valid) {
      // console.log("提交更新", yingpinForm);
      request
        .post("/yingpin/add", formData, {
          headers: {
            "Content-Type":
              "multipart/form-data;charset=UTF-8; boundary=<calculated when request is sent>",
          },
        })
        .then((res) => {
          if (res.data.code == 200) {
            ElNotification({
              title: "添加门票",
              message: "成功添加应聘信息",
            });
            formEl.resetFields();
            //清除图片
            upload.value.clearFiles();
            fileList.value = [];
          } else {
            ElNotification({
              title: "添加失败",
              message: "请联系管理员检查失败原因",
            });
          }
        })
        .catch((e) => {
          ElNotification({
            title: "添加失败",
            message: "请联系管理员检查失败原因",
          });
        });
    } else {
      ElNotification({
        title: "校验失败",
        message: "请重新填写信息",
      });
    }
  });
};
let categoryData = reactive([]);
//获取分类数据
const getCategory = () => {
  request
    .request({
      url: "/category/getAllCategory",
      method: "get",
    })
    .then((res) => {
      //获取数据
      res.data.data.forEach((e) => {
        categoryData.push(e);
      });
    })
    .catch((e) => {
      console.log(e);
    });
};
getCategory();
</script>

<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item
          v-for="(item, index) in breadList"
          :key="index"
          :to="{ path: item.path }"
          >{{ item.meta.title }}</el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <div class="container">
      <div>
        <el-form
          ref="yingpinFormRef"
          :model="yingpinForm"
          :rules="rules"
          label-width="120px"
          status-icon
          enctype="multipart/form-data"
        >
          <el-form-item label="岗位类型" prop="jzId">
            <el-select
              v-model="yingpinForm.jzId"
              placeholder="选择岗位分类"
              class="handle-select mr10"
            >
              <el-option
                v-for="(item, index) in categoryData"
                :key="index"
                :label="item.catName"
                :value="item.catId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="岗位名称" prop="jzName">
            <el-input v-model="yingpinForm.jzName" />
          </el-form-item>
          <el-form-item label="岗位薪资" prop="salary">
            <el-input v-model="yingpinForm.salary" />
          </el-form-item>
          <el-form-item label="商户电话" prop="phonenumber">
            <el-input v-model="yingpinForm.phonenumber" />
          </el-form-item>
          <el-form-item label="岗位内容" prop="content">
            <el-input v-model="yingpinForm.content" />
          </el-form-item>
          <el-form-item label="用户姓名" prop="username">
            <el-input v-model="yingpinForm.username" />
          </el-form-item>
          <el-form-item label="用户电话" prop="tel">
            <el-input v-model="yingpinForm.tel" />
          </el-form-item>
          <el-form-item label="用户性别" prop="sex">
            <el-radio-group v-model="yingpinForm.sex">
              <el-radio :label="1">男</el-radio>
              <el-radio :label="0">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="用户年龄" prop="age">
            <el-input v-model="yingpinForm.age" />
          </el-form-item>
          <el-form-item label="岗位审核状态" prop="ypState">
            <el-radio-group v-model="yingpinForm.ypState">
              <el-radio :label="0">未审核</el-radio>
              <el-radio :label="1">审核通过</el-radio>
              <el-radio :label="2">审核不过</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-button type="primary" @click="submitForm(yingpinFormRef)"
          >新增</el-button
        >
        <el-button @click="resetForm(yingpinFormRef)">重置表单</el-button>
      </div>
    </div>
  </div>
</template>
